<template>
  <div class="dingjin">
    <div class="yingfu">
      <span>应付金额：</span><span>￥{{ z_money }}元</span>
    </div>
    <van-radio-group v-model="radio">
      <ul class="fuzhang">
        <li>
          <img src="../../../assets/dingdanxinxi/kehuyue.jpg" alt="" />
          <span>{{ fukuan[0].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="账户余额"
            name="账户余额"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/zhifubao.jpg" alt="" />
          <span>{{ fukuan[1].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="支付宝"
            name="支付宝"
          ></van-radio>
        </li>
        <li>
          <img src="../../../assets/dingdanxinxi/weixin.jpg" alt="" />
          <span>{{ fukuan[2].text }}</span>
          <van-radio
            class="radio_checke_fukuan_style"
            value="微信"
            name="微信"
          ></van-radio>
        </li>
      </ul>
    </van-radio-group>
    <div class="tongyi_yuedu">
      <van-checkbox class="ckecked_tongyi_ground_btn" v-model="checked" shape="square" />
      <span>同意</span>
      <span>《平价分时租车租赁协议》</span>
    </div>
    <van-button
      :disabled="!checked"
      class="buton_botom"
      type="info"
      @click="fukuantotongzhi"
    >
      {{ radio }}
    </van-button>
  </div>
</template>

<script>
import { pay } from "../../../request/userinfo/userinfo";
import { Notify } from "vant";
export default {
  props: {},
  data() {
    return {
      radio: "账户余额支付",
      checked: false,
      fukuan: [{ text: "账户余额支付" }, { text: "支付宝" }, { text: "微信" }],
      z_money: 0,
    };
  },
  methods: {
    fukuantotongzhi() {
      // "2020-11-26 08:18:55 "
      let stime = this.$store.state.startime_;
      let etime = this.$store.state.endtime_;
      let new_stime =
        stime.getFullYear() +
        "-" +
        (stime.getMonth() + 1) +
        "-" +
        stime.getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ":" +
        new Date().getSeconds();
      let new_etime =
        etime.getFullYear() +
        "-" +
        (etime.getMonth() + 1) +
        "-" +
        etime.getDate() +
        " " +
        new Date().getHours() +
        ":" +
        new Date().getMinutes() +
        ":" +
        new Date().getSeconds();
      alert(new_stime);
      console.log(this.z_money, this.$store.state.user.accountBalance);
      if (this.z_money > this.$store.state.user.accountBalance) {
        console.log(this.z_money),
        console.log( this.$store.state.user.accountBalance),
        Notify({ type: "danger", message: "余额不足请充值" });
        this.$router.push("/wallet");
      } else {
        pay({
          brrowShop: this.$store.state.brrowShop, //门店id
          carId: this.$store.state.carinfo.id, //车id
          clientId: this.$store.state.user.id, //用户id
          // clientId: 1, //用户id
          endTime: new_etime,
          isgetcarathome: "string",
          isreturncarathome: "string",
          payType: 2,
          preparidAmount: this.z_money,
          returnShop: 1,
          startTime: new_stime,
          state: 3,
          totalPrice: this.z_money, //支付金额
        }).then((res) => {
          this.$store.state.order = res;
          this.$router.push("/dingdantongzhi");
        });
      }
    },
  },
  mounted() {
    let money = this.$store.state.carinfo.price;
    let stime = this.$store.state.startime_;
    let etime = this.$store.state.endtime_;
    let time = (etime - stime) / 24 / 60 / 60 / 1000;
    this.z_money = (money - 0) * time;
    // console.log(this.$store.state.carinfo.id)
  },
  components: {},
};
</script>

<style scoped lang="less">
.dingjin {
  width: 100%;
  margin-top: 0.05rem;
  font-size: 0;
  .yingfu {
    width: 95%;
    height: 0.73rem;
    margin: 0 auto;
    border-radius: 0.08rem;
    background: white;
    line-height: 0.73rem;
    padding-left: 0.15rem;
    span {
      font-size: 0.25rem;
      font-weight: 600;
    }
    span:last-child {
      color: #f0230e;
    }
  }
  .fuzhang {
    width: 95%;
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto;
    margin-top: 0.25rem;
    position: relative;
    li {
      flex: 1;
      display: flex;
      align-items: center;
      img {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 0.08rem;
      }
      span {
        font-size: 0.26rem;
        margin-left: 0.26rem;
        font-weight: 600;
      }
    }
  }
  .tongyi_yuedu {
    width: 95%;
    margin: 0.27rem auto 0.6rem auto;
    display: flex;
    align-items: center;
    span:nth-child(2) {
      font-size: 0.22rem;
      color: #666;
      margin-left: 0.2rem;
    }
    span:last-child {
      font-size: 0.23rem;
      color: #4395ff;
      margin-left: 0.29rem;
    }
  }
  .buton_botom {
    width: 100%;
    height: 0.81rem;
    background: #4395ff;
    color: white;
    font-size: 0.29rem;
  }
}
</style>
